<template>
  <swiper 
    class="product-swiper" 
    indicator-dots 
    autoplay 
    circular
    indicator-active-color="$primary-color"
  >
    <swiper-item v-for="(image, index) in images" :key="index">
      <image 
        class="swiper-image" 
        :src="image" 
        mode="aspectFill"
        @click="previewImage(index)"
      />
    </swiper-item>
  </swiper>
</template>

<script setup>
defineProps({
  images: {
    type: Array,
    default: () => []
  }
})

const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: props.images
  })
}
</script>

<style lang="scss">
.product-swiper {
  width: 100%;
  height: 750rpx;
  
  .swiper-image {
    width: 100%;
    height: 100%;
  }
}
</style>